<nz-spin [nzSpinning]="isSpinning" id="edit-dom">
  <section class="dashboard_container">
    <!--图形区域-->
    <div class="graphic_container">
      <div class="graphic_edit_ariticle-container">
        <!--按钮-->
        <div class="graphic_btn-container">
          <button nz-button nzType="primary" [routerLink]="['/article-management/article-list']">
            <i class="anticon anticon-rollback"></i>返回
          </button>
          <button nz-button nzType="primary" (click)="isSpinning=true;getData()">
            <i class="anticon anticon-reload"></i>刷新
          </button>
        </div>
        <!--表单-->
        <form nz-form [formGroup]="validateForm" class="edit-form">
          <nz-form-item>
            <nz-form-label [nzSm]="6" [nzXs]="24" nzRequired nzFor="title">文章标题</nz-form-label>
            <nz-form-control [nzSm]="14" [nzXs]="24">
              <input nz-input formControlName="title" placeholder="请输入文章标题" id="title">
              <nz-form-explain *ngIf="validateForm.get('title').dirty && validateForm.get('title').errors">请输入文章标题!
              </nz-form-explain>
            </nz-form-control>
          </nz-form-item>
          <nz-form-item>
            <nz-form-label [nzSm]="6" [nzXs]="24" nzRequired nzFor="date">日期</nz-form-label>
            <nz-form-control [nzSm]="14" [nzXs]="24">
              <nz-date-picker formControlName="date" id="date" [(ngModel)]="date" (ngModelChange)="changeDate($event)"
                              nzShowTime></nz-date-picker>
              <nz-form-explain *ngIf="validateForm.get('date').dirty && validateForm.get('date').errors">请输入文章编辑日期!
              </nz-form-explain>
            </nz-form-control>
          </nz-form-item>
          <nz-form-item>
            <nz-form-label [nzSm]="6" [nzXs]="24" nzRequired nzFor="show_img">文章展示图片</nz-form-label>
            <nz-form-control [nzSm]="14" [nzXs]="24">
              <!--<nz-upload-->
              <!--nzAction="">-->
              <!--<button nz-button>-->
              <!--<i class="anticon anticon-upload"></i><span>上传图片</span>-->
              <!--</button>-->
              <!--</nz-upload>-->
              <input formControlName="show_img" class="img-upload" id="show_img" type="file"
                     accept="image/jpeg,image/png"
                     name="imgfile"
                     multiple (change)="imgChange()" style="display: none">
              <img class="upload_finish_img" src="{{sendData.img}}" alt="">
              <button nz-button nzType="primary" (click)="uploadImg()">上传图片</button>
            </nz-form-control>
          </nz-form-item>
          <nz-form-item>
            <nz-form-label [nzSm]="6" [nzXs]="24" nzRequired>文章介绍</nz-form-label>
            <nz-form-control [nzSm]="14" [nzXs]="24">
              <textarea formControlName="introduce" nz-input rows="2" placeholder="请输入文章文章介绍"></textarea>
              <nz-form-explain
                *ngIf="validateForm.get('introduce').dirty&&validateForm.get('introduce').hasError('required')">
                请输入文章文章介绍!
              </nz-form-explain>
            </nz-form-control>
          </nz-form-item>
          <nz-form-item>
            <nz-form-label [nzSm]="6" [nzXs]="24" nzRequired>文章详情</nz-form-label>
            <nz-form-control [nzSm]="18" [nzXs]="18">
              <!--wangeditor编辑器-->
              <div id="editorElem"></div>
              <!--<input nz-input formControlName="details" id="details">-->
              <!--<nz-form-explain *ngIf="validateForm.get('details').dirty && validateForm.get('details').errors">请输入文章详情!</nz-form-explain>-->
            </nz-form-control>
          </nz-form-item>
          <nz-form-item nz-row style="margin-bottom:8px;">
            <nz-form-control [nzSpan]="14" [nzOffset]="6">
              <button nz-button nzType="primary" (click)="submitForm()">提交</button>
            </nz-form-control>
          </nz-form-item>
        </form>
      </div>
    </div>
  </section>
</nz-spin>
